<template>
  <view>
    <!-- 循环分类功能 -->
    <!-- #ifndef H5-PLAY || MP-WEIXIN-PLAY -->
    <view class="post-box__ft-categories">
      <qui-button
        v-for="(item, index) in allCategories"
        :key="item.pid"
        :type="Number(item.pid) === Number(categoryId) ? 'primary' : ''"
        :plain="Number(item.pid) === Number(categoryId)"
        :class="Number(item.pid) === Number(categoryId) ? 'cateActive' : ''"
        @click="checkClass(item, index, item.pid)"
      >
        {{ item.name }}
      </qui-button>
    </view>
    <view class="post-box__ft-categories post-box__img" v-if="secondallcategories != ''">
      <qui-button
        v-for="(item1, index) in secondallcategories"
        :key="item1.pid"
        :type="Number(item1.pid) === Number(two_categoryId) ? 'primary' : ''"
        :plain="Number(item1.pid) === Number(two_categoryId)"
        :class="Number(item1.pid) === Number(two_categoryId) ? 'cateActive' : ''"
        @click="checkClassing(item1, index, item1.pid)"
      >
        {{ item1.name }}
      </qui-button>
    </view>
    <!-- #endif -->
    <!-- #ifdef H5-PLAY || MP-WEIXIN-PLAY -->
    <view class="post-box__ft-categories">
      <!-- 一级菜单 -->
      <qui-button
        v-for="(item, index) in allCategories"
        :key="item.pid"
        :type="Number(item.pid) === Number(categoryId) ? 'primary' : ''"
        :plain="Number(item.pid) === Number(categoryId)"
        :class="Number(item.id) === Number(categoryId) ? 'cateActive' : ''"
        @click="checkClass(item, index, item.pid)"
      >
        {{ item.name }}
      </qui-button>
    </view>
    <!-- 二级菜单 -->
    <view class="post-box__ft-categories post-box__img" v-if="secondallcategories != ''">
      <qui-button
        v-for="(item1, index) in secondallcategories"
        :key="item1.pid"
        :type="Number(item1.pid) === Number(two_categoryId) ? 'primary' : 'second_level'"
        :plain="Number(item1.pid) === Number(two_categoryId)"
        :class="Number(item1.pid) === Number(two_categoryId) ? 'cateActive' : ''"
        @click="checkClassing(item1, index, item1.pid)"
      >
        {{ item1.name }}
      </qui-button>
      <img src="https://www.qiyaoshuizu.cn/static/h5-play/pullDown.png" alt="" class="pullDown_img" />
    </view>
    <!-- 二级菜单结束 -->
    <!-- #endif -->
    <!-- 循环分类功能结束 -->
  </view>
</template>

<script>
  export default{
    data() {
      return {
         allCategories: [], // 所有分类
        secondallcategories: [], // 二级分类
        categoryIndex: '', // 分类下标
        categoryId: '', // 一级分类id
        two_categoryId: '', // 二级分类选中
      }
    },
     mounted() {
        this.getCategories();
    },
    methods:{
      // 接口请求
      async getCategories() {
        await this.$store.dispatch('jv/get', ['categories.v2?filter[createThread]=1', {}]).then(res => {
          res=res._jv.json.Data;
          this.allCategories = res;
          // 默认选择第一个分类
          if (this.categoryId === '') {
            this.checkClass(this.allCategories[0], 0,this.allCategories[0].pid);
          }
          // #ifndef H5-PLAY || MP-WEIXIN-PLAY
          res.map(item => {
            if (item) {
              if (Number(item.pid) === Number(this.categoryId)) {
                this.checkClassData.push(item);
              }
            }
            return item;
          });
          // #endif
        });

        !!this.categoryId && this.initCategoryId(this.categoryId);

      },
 // 分类点击
    checkClass(e, index, f_id) {
      // 当前一级分类
      // 单选功能
      this.two_categoryId = '';
      this.checkClassData = [];
      if (this.categoryId != f_id) {
        this.categoryId = f_id;
        this.checkClassData.push(e);
        this.secondallcategories = e.children || []; //二级分类点击事件
      } else {
        this.categoryId = '';
      }
    },
    checkClassing(e, index, id) {
      // 二级下拉单选功能
      // 当前二级分类
      if (+this.two_categoryId != +id) {
        this.two_categoryId = id;
      } else {
        this.two_categoryId = '';
      }
    },
    }
  }
</script>

<style>
</style>
